<ot-view>

    <div class="row" ng-hide="changeLog">
        <div class="col-md-12 alert alert-warning">
            <ot-loading>
                The change log is loading. This may take some time...
            </ot-loading>
        </div>
    </div>

    <div class="row" ng-show="changeLog">
        <div class="col-md-12">

            <!-- Main content -->
            <div class="row">
                <div class="col-md-12 ot-header-commands">
                    <button class="btn btn-default" ng-click="changeLogRevisions()" ng-disabled="revisionsLoading">
                        <ot-loading ng-if="revisionsLoading"></ot-loading>
                        <span class="ot-header-command-unloaded" ng-hide="revisions || revisionsLoading"></span>
                        {{revisionsCommand}}
                    </button>
                    <button ng-if="changeLog._issues" class="btn btn-default" ng-click="changeLogIssues()" ng-disabled="issuesLoading">
                        <ot-loading ng-if="issuesLoading"></ot-loading>
                        <span class="ot-header-command-unloaded" ng-hide="issues || issuesLoading"></span>
                        {{issuesCommand}}
                    </button>
                    <button class="btn btn-default" ng-click="changeLogFiles()" ng-disabled="filesLoading">
                        <ot-loading ng-if="filesLoading"></ot-loading>
                        <span class="ot-header-command-unloaded" ng-hide="files || filesLoading"></span>
                        {{filesCommand}}
                    </button>
                </div>
            </div>

            <!-- Build info -->
            <div class="row">
                <div class="col-md-6">
                    <a name="buildFrom"></a>
                    <ot-scm-changelog-build scm-build-view="changeLog.scmBuildFrom">
                        <div class="row">
                            <div class="col-md-12">
                                <h3>
                                    <small>History</small>
                                </h3>
                                <ul>
                                    <li ng-repeat="reference in changeLog.scmBuildFrom.scm.references">
                                        <a href="{{reference.url}}">
                                            {{reference.path}}
                                            @
                                            {{reference.revision}}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </ot-scm-changelog-build>
                </div>
                <div class="col-md-6">
                    <a id="buildTo"></a>
                    <ot-scm-changelog-build scm-build-view="changeLog.scmBuildTo">
                        <div class="row">
                            <div class="col-md-12">
                                <h3>
                                    <small>History</small>
                                </h3>
                                <ul>
                                    <li ng-repeat="reference in changeLog.scmBuildTo.scm.references">
                                        <a href="{{reference.url}}">
                                            {{reference.path}}
                                            @
                                            {{reference.revision}}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </ot-scm-changelog-build>
                </div>
            </div>

            <!-- Revision sections -->
            <div class="row">
                <div class="col-md-12">
                    <a name="revisions"></a>

                    <div class="panel panel-default">
                        <div class="panel-heading clearfix">
                            Revisions
                            <div class="pull-right">
                                <a class="btn btn-default btn-xs" ng-if="changeLog._issues" ng-click="changeLogIssues()" ng-disabled="issuesLoading">
                                    <ot-loading ng-if="issuesLoading"></ot-loading>
                                    <span class="ot-header-command-unloaded" ng-hide="issues || issuesLoading"></span>
                                    {{issuesCommand}}
                                </a>
                                <a class="btn btn-default btn-xs" ng-click="changeLogFiles()" ng-disabled="filesLoading">
                                    <ot-loading ng-if="filesLoading"></ot-loading>
                                    <span class="ot-header-command-unloaded" ng-hide="files || filesLoading"></span>
                                    {{filesCommand}}
                                </a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="alert alert-warning" ng-hide="revisions || revisionsLoading">
                                No revision has been loaded yet. Click
                                <a ng-click="changeLogRevisions()" class="ot-action">here</a>
                                to load them.
                            </div>
                            <div class="ot-description" ng-show="revisionsLoading">
                                <ot-loading>Revisions are loading...</ot-loading>
                            </div>
                            <!-- Merge -->
                            <table class="table table-condensed table-hover" ng-show="revisions">
                                <thead>
                                <tr>
                                    <th>Revision</th>
                                    <th>Author</th>
                                    <th>Date</th>
                                    <th>Message</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="svnChangeLogRevision in revisions.list">
                                    <td>
                                        <a href="{{svnChangeLogRevision.revisionUrl}}" target="_blank">
                                            {{svnChangeLogRevision.revision}}
                                        </a>
                                    </td>
                                    <td>
                                        {{svnChangeLogRevision.author}}
                                    </td>
                                    <td class="ot-line-no-overflow">
                                        {{svnChangeLogRevision.revisionDate | date:'mediumDate'}}
                                        {{svnChangeLogRevision.revisionDate | date:'shortTime'}}
                                    </td>
                                    <td ng-bind-html="svnChangeLogRevision.formattedMessage">
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Issue sections -->
            <div class="row" ng-if="changeLog._issues">
                <div class="col-md-12">
                    <a name="issues"></a>

                    <div class="panel panel-default">
                        <div class="panel-heading clearfix">
                            Issues
                            <div class="pull-right">
                                <a class="btn btn-default btn-xs" ng-click="changeLogRevisions()" ng-disabled="revisionsLoading">
                                    <ot-loading ng-if="revisionsLoading"></ot-loading>
                                    <span class="ot-header-command-unloaded" ng-hide="revisions || revisionsLoading"></span>
                                    {{revisionsCommand}}
                                </a>
                                <a class="btn btn-default btn-xs" ng-click="changeLogFiles()" ng-disabled="filesLoading">
                                    <ot-loading ng-if="filesLoading"></ot-loading>
                                    <span class="ot-header-command-unloaded" ng-hide="files || filesLoading"></span>
                                    {{filesCommand}}
                                </a>
                                <a class="btn btn-default btn-xs" ng-click="changeLogExport()">
                                    <span class="fa fa-file-text-o"></span>
                                    Export
                                </a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="alert alert-warning" ng-hide="issues || issuesLoading">
                                No issue has been loaded yet. Click
                                <a ng-click="changeLogIssues()" class="ot-action">here</a>
                                to load them.
                            </div>
                            <div class="ot-description" ng-show="issuesLoading">
                                <ot-loading>Issues are loading...</ot-loading>
                            </div>
                            <div ng-show="issues">
                                <ot-include value="issues" template="extension/{{issues.issueServiceConfiguration.serviceId}}/changelog.issues.tpl.html">
                                </ot-include>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Files sections -->
            <div class="row">
                <div class="col-md-12">
                    <a name="files"></a>

                    <div class="panel panel-default">
                        <div class="panel-heading clearfix">
                            File changes
                            <div class="pull-right">
                                <a class="btn btn-default btn-xs" ng-click="changeLogRevisions()" ng-disabled="revisionsLoading">
                                    <ot-loading ng-if="revisionsLoading"></ot-loading>
                                    <span class="ot-header-command-unloaded" ng-hide="revisions || revisionsLoading"></span>
                                    {{revisionsCommand}}
                                </a>
                                <a class="btn btn-default btn-xs" ng-if="changeLog._issues" ng-click="changeLogIssues()" ng-disabled="issuesLoading">
                                    <ot-loading ng-if="issuesLoading"></ot-loading>
                                    <span class="ot-header-command-unloaded" ng-hide="issues || issuesLoading"></span>
                                    {{issuesCommand}}
                                </a>
                            </div>
                        </div>
                        <div class="panel-body" ng-hide="files || filesLoading">
                            <div class="alert alert-warning">
                                No file change has been loaded yet. Click
                                <a ng-click="changeLogFiles()" class="ot-action">here</a>
                                to load them.
                            </div>
                        </div>
                        <div class="panel-body ot-description" ng-show="filesLoading">
                            <ot-loading>File changes are loading...</ot-loading>
                        </div>
                        <div class="panel-body ot-panel-padded" ng-show="files">
                            <ot-extension-scm-changelog-filechangefilter change-log="changeLog" filter-callback="changeLogFileFilterConfig.callback"></ot-extension-scm-changelog-filechangefilter>
                        </div>
                        <div class="panel-body ot-panel-padded" ng-show="files">
                            <div class="ot-line-no-overflow ot-line-hover ot-line-border"
                                 ng-repeat="svnChangeLogFile in files.list | filter:changeLogFileFilterConfig.filter">
                                <a href="{{svnChangeLogFile.url}}">
                                    {{svnChangeLogFile.path}}
                                </a>
                                <span ng-repeat="svnChangeLogFileChange in svnChangeLogFile.changes" class="ot-label-change ot-label-change-{{svnChangeLogFileChange.changeType | lowercase}}">
                                    <span class="ot-label-change-icon"></span>
                                    <a href="{{svnChangeLogFileChange.url}}"
                                       title="{{svnChangeLogFileChange.revisionInfo.message}} ({{svnChangeLogFileChange.revisionInfo.dateTime | date:'mediumDate'}})">
                                        {{svnChangeLogFileChange.revisionInfo.revision}}
                                    </a>
                                </span>
                                <span ng-hide="svnChangeLogFile.diffLoading || diffLoading" class="fa fa-download ot-command" title="Shows diff" ng-click="showFileDiff(changeLog, svnChangeLogFile)"></span>
                                <span ng-show="svnChangeLogFile.diffLoading" class="fa fa-spin fa-spinner ot-command" title="Diff is loading..."></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- End of sections -->

        </div>
    </div>

</ot-view>